<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        .card {
            border: none;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .card-header {
            background-color: #f8f9fa;
            border-bottom: none;
            font-size: 18px;
            font-weight: bold;
        }
        .form-control {
            border-radius: 4px;
            padding: 10px 12px;
        }
        .form-control:focus {
            box-shadow: none;
            border-color: #80bdff;
        }
        .text-danger {
            font-size: 12px;
        }
        .btn-primary {
            background-color: #17a2b8;
            border-color: #17a2b8;
        }
        .btn-primary:hover {
            background-color: #138496;
            border-color: #117a8b;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h4>注册</h4>
                    </div>
                    <div class="card-body">
                        <form id="registerForm" method="POST" action="{{ url_for('auth.register') }}">
                            <div class="form-group row">
                                <label for="username" class="col-sm-3 col-form-label">用户名</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="username" name="username" value="{{ username if username }}" required>
                                    <div class="invalid-feedback" id="username-error"></div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="nickname" class="col-sm-3 col-form-label">昵称</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="nickname" name="nickname" value="{{ nickname if nickname }}" required>
                                    <div class="invalid-feedback" id="nickname-error"></div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="email" class="col-sm-3 col-form-label">Email</label>
                                <div class="col-sm-9">
                                    <input type="email" class="form-control" id="email" name="email" value="{{ email if email }}" required>
                                    <div class="invalid-feedback" id="email-error"></div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="password" class="col-sm-3 col-form-label">密码</label>
                                <div class="col-sm-9">
                                    <input type="password" class="form-control" id="password" name="password" required>
                                    <div class="invalid-feedback" id="password-error"></div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="confirm-password" class="col-sm-3 col-form-label">密码确认</label>
                                <div class="col-sm-9">
                                    <input type="password" class="form-control" id="confirm-password" name="confirm-password" required>
                                    <div class="invalid-feedback" id="confirm-password-error"></div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-sm-9 offset-sm-3">
                                    <button type="submit" class="btn btn-primary">注册</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function() {
            // 表单验证
            $('#registerForm').on('submit', function(e) {
                let isValid = true;
                let username = $('#username').val().trim();
                let nickname = $('#nickname').val().trim();
                let email = $('#email').val().trim();
                let password = $('#password').val();
                let confirmPassword = $('#confirm-password').val();

                // 清除之前的错误信息
                $('.invalid-feedback').text('');

                // 验证用户名
                if (username === '') {
                    $('#username-error').text('请输入用户名');
                    isValid = false;
                }

                // 验证昵称
                if (nickname === '') {
                    $('#nickname-error').text('请输入昵称');
                    isValid = false;
                }

                // 验证邮箱
                if (email === '') {
                    $('#email-error').text('请输入电子邮箱');
                    isValid = false;
                } else if (!isValidEmail(email)) {
                    $('#email-error').text('Email格式不正确');
                    isValid = false;
                }

                // 验证密码
                if (password === '') {
                    $('#password-error').text('请输入密码');
                    isValid = false;
                }

                // 验证密码确认
                if (confirmPassword === '') {
                    $('#confirm-password-error').text('请再次输入密码');
                    isValid = false;
                } else if (password !== confirmPassword) {
                    $('#confirm-password-error').text('两次密码不一致');
                    isValid = false;
                }

                return isValid;
            });

            // 邮箱格式验证函数
            function isValidEmail(email) {
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                return emailRegex.test(email);
            }
        });
    </script>
</body>
</html>